<template>
    <div v-if="model" class="page-article">
        <div class="tabbar d-flex px-2 ai-center py-3">
            <svg class="icon" aria-hidden="true" @click="$router.push('/')">
                <use xlink:href="#icon-return"></use>
            </svg>
            <strong class="flex-1 pl-1 text-title text-ellipsis">{{model.title}}</strong>
            <span class="fs-xs text-grey">{{model.createdAt | date}}</span>
        </div>
        <div class="content p-3"  v-html="model.content"></div>
        <div class="mb-5">
            <div class="p-3 d-flex ai-center">
                <svg class="icon" aria-hidden="true" style="font-size:2.6rem">
                    <use xlink:href="#icon-tianchongxing-"></use>
                </svg>
                <strong class="flex-1 pl-2 text-title fs-xxl">相关资讯</strong>
            </div>
            <div v-if="model.related.length > 0">
                <router-link tag="div" :to="`/main/article/${item._id}`"
                @click.native="addListed(item._id)"
                class=" px-3 mb-2 d-flex ai-center" 
                v-for="(item,key) in model.related" :key="key">
                    <span class="fs-lg flex-1 text-ellipsis">{{item.title}}</span>
                    <span class="fs-sm text-grey">{{item.createdAt | date}}</span>
                </router-link>
            </div>
            <div v-else class="pl-2 fs-xxl text-grey-1">
                <span class="">暂无更多</span>
            </div>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    
    export default {
        name:'Article',
        filters:{
            date(val){
                return dayjs(val).format('YYYY-MM-DD')
            }
        },
        props:{
            id:{
                required:true,
                type:String
            }
        },
        data () {
            return {
                model:null
            }
        },
        methods:{
            async fetch(){
                const article = await this.$http.get(`article/${this.id}`)
                const related = await this.$http.post('article',{id:this.$store.state.ListedArticle || [this.id],
                                                                 categories:article.data.categories,
                                                                 limit:2})
                this.model = article.data
                this.model.related = related.data
                document.title += "-"+this.model.title
            }
        },
        created(){
            this.fetch()
        }
    }
</script>

<style lang="scss">
    @import 'assets/scss/_variables.scss';
    .page-article{
        max-width: 100%;
        .tabbar{
            border-bottom: 1px solid $border-color;
        }
        .content{
            border-bottom: 4px solid $border-color;
        }
        img{
            max-width: 100%;
            height: auto;
        }
        iframe{
            max-width: 100%;
            height: auto;
        }
    }
    
    
</style>